﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Map</title>
    <script src="/static/js/common.js"></script>
</head>
<style>
    .canvas {
        border-style: solid;
        border-width: 1px;
        border-color: #000
    }

    .subArea {
        width: 100px;
        height: 100px;
        float: left;
        margin: 15px;
    }
</style>
<body>
    <div id="main">
        <el-dialog :title="currPatterningObj.name" :fullscreen="true" width="80%" height="80%" :visible="dialogVisible" @close="dialogVisible = false;">
            <div v-if="subAreaList.length==0">此区域下无子区域数据</div>
            <div class="subArea" v-for="areaItem in subAreaList" :style="{'background-color': getBackground(areaItem.riskGrade)}">
                {{areaItem.name}}
            </div>
        </el-dialog>
        <el-slider id="slider" v-model="z" prefix="" :min="0.1" :max="1" :step="0.01" @change="zChange" @input="zChange"></el-slider>
        <canvas id="canvas" :width="mapWidth" :height="mapHeight"
                style="background-image: url(SanDongShengAoMap.png); background-repeat:no-repeat; background-size:100%;">
    </div>
    <script type="text/javascript">
        //canvas鼠标右键功能类型
        var functionType = {
            draw: "draw",//画图
            isInPath: "isInPath",//判断是否在某张图形的路径上
            selectPatterning: "selectPatterning"//选中图形dv
        };
        var patterningType = {
            line: "line",
            arc: "arc"
        };

        var canvas;
        new Vue({
            el: '#main',
            data: {
                z: 0.1,
                currFunctionType: functionType.selectPatterning,//当前canvas鼠标右键功能类型
                patterningList: [],//图形集合
                mapPositionList: [],//图标点
                mapWidth: 8410,
                mapHeight: 11890,
                timer: null,
                beginTimer: null,
                dialogVisible: false,
                currPatterningObj: {},
                subAreaList: [],
                counter: 0,//计数器
                imageH: 75,
                imageW: 75,
                imgBlack: null,
                imgCurr: null,
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                zChange: function () {
                    this.mapWidth = 8410 * this.z
                    this.mapHeight = 11890 * this.z
                },
                //背景颜色
                getBackground: function (level) {
                    switch (level + "") {
                        case "1"://红#FB4C4C
                            return "rgba(251,76,76,1)";
                            break;
                        case "2"://橙#FF854C
                            return "rgba(255,133,76,1)";
                            break;
                        case "3"://黄#FFF461
                            return "rgba(255,244,97,1)";
                            break;
                        case "4"://蓝#4CA2FF
                            return "rgba(76,162,255,1)";
                            break;
                        default:
                            return "rgba(76,162,255,1)";
                    }
                },
                //绘制图
                DrawAll: function () {
                    canvas.width = canvas.width;
                    //画区域图
                    for (var i = 0; i < this.patterningList.length; i++) {
                        this.Draw(this.patterningList[i]);
                    }
                    //画点
                    for (var i = 0; i < this.mapPositionList.length; i++) {
                        this.drawMapPosition(this.mapPositionList[i]);
                        console.log(this.mapPositionList[i]);
                    }
                },
                //绘图
                Draw: function (patterningObj) {
                    d2d = canvas.getContext('2d');
                    d2d.fillStyle = this.getBackground(patterningObj.riskGrade);
                    //d2d.strokeStyle = '#f00';
                    d2d.beginPath();
                    //直线
                    if (patterningObj.type == patterningType.line) {
                        if (patterningObj.pathList.length > 0)
                            d2d.moveTo(patterningObj.pathList[0].x * this.z, patterningObj.pathList[0].y * this.z)
                        for (var i = 1; i < patterningObj.pathList.length; i++) {

                            var addr = patterningObj.pathList[i];
                            d2d.lineTo(addr.x * this.z, addr.y * this.z);
                        }
                        //圆形
                    } else if (patterningObj.type == patterningType.arc) {
                        if (patterningObj.pathList.length != 1)
                            return;
                        var x = patterningObj.pathList[0].x * this.z
                        var y = patterningObj.pathList[0].y * this.z;
                        d2d.arc(x, y, patterningObj.arc_R * this.z, 0, Math.PI * 2, true);
                    };
                    d2d.closePath();
                    //填充当前或已存在的路径
                    d2d.fill();
                    //绘制当前或已经存在的路径的方法
                    d2d.stroke();

                    //文字处理
                    if (!patterningObj.pathList || patterningObj.pathList.length == 0)
                        return;
                    d2d.font = (60 * this.z > 15) ? 60 * this.z : 15 + "px bold 黑体";
                    // 设置颜色
                    d2d.fillStyle = "#000000";
                    // 设置水平对齐方式
                    d2d.textAlign = "left";//'left || start' 、 'right || end' 、 'center'
                    // 设置垂直对齐方式
                    d2d.textBaseline = "top";// 'top' 、'bottom'、'middle'、'alphabetic'、'hanging'、'ideographic'
                    var x = patterningObj.pathList[0].x * this.z
                    var y = patterningObj.pathList[0].y * this.z;
                    // 绘制文字（参数：要写的字，x坐标，y坐标）
                    d2d.fillText(patterningObj.name, x, (y + 20 * this.z));
                },
                drawMapPosition: function (patterningObj) {
                    d2d = canvas.getContext('2d');
                    //图形居中处理
                    var image_x = patterningObj.x*this.z - this.imageH / 2;
                    var image_y = patterningObj.y*this.z - this.imageW;
                    //当前操作图形绿色标记
                    if (patterningObj.id == this.currPatterningObj.id)
                        d2d.drawImage(this.imgGreen, image_x, image_y, this.imageW, this.imageH);
                    else
                        d2d.drawImage(this.imgBlack, image_x, image_y, this.imageW, this.imageH);
                    //图形外部画隐形边框
                    //d2d.beginPath();
                    //d2d.rect(image_x, image_y, this.imageW, this.imageH);
                    //d2d.closePath();
                },
                initImage: function () {
                    var app = this;
                    this.imgBlack = new Image();
                    this.imgBlack.src = "../static/positionBlack.png";
                    this.imgBlack.onload = function () {
                        app.imgGreen = new Image();
                        app.imgGreen.src = "../static/positionGreen.png";
                        app.imgGreen.onload = function () {
                            app.GetPageData();
                            //向图形list 放入第一个图形对象
                            app.patterningList.push(app.currPatterningObj);
                            app.DrawAll();
                        };
                    };
                },
                //获取接口数据
                GetPageData: function () {
                    var app = this;
                    myAjax("get", this, '/api/SysArea/GetMapInfo?ParentId=', null, function (response) {
                        app.patterningList = response.data.mapInfo
                        app.mapPositionList = response.data.mapPosition
                        app.DrawAll();
                    }, false);

                },
                //获取子区域数据
                getSubAreaData: function () {
                    var app = this;
                    myAjax("get", this, '/api/SysArea/GetMapInfo?ParentId=' + app.currPatterningObj.id, null, function (response) {
                        app.subAreaList = response.data.mapInfo;
                    }, false);
                },
            },
            mounted: function () {
                tablehigh(this);
                var app = this;
                this.initImage();
                //获得画板
                canvas = document.getElementById("canvas");
                canvas.onclick = function (e) {
                    var d2d = canvas.getContext('2d');
                    // 得到鼠标的坐标
                    var x = e.pageX, y = e.pageY;
                    y = y - $("#slider").height();//减html最上部有一个slider控件的高度
                    //）所有像素变成透明，并擦除之前绘制的所有内容的方
                    d2d.clearRect(0, 0, app.mapWidth, app.mapHeight)
                    // 遍历绘制图形
                    for (var i = 0; i < app.patterningList.length; i++) {
                        var patterningObj = app.patterningList[i];
                        app.Draw(patterningObj);
                        if (d2d.isPointInPath(x, y)) {
                            app.currPatterningObj = patterningObj;
                            app.getSubAreaData();
                            app.dialogVisible = true;
                            continue;
                        }
                    }
                }
                this.zChange();
                //载入后绘图
                this.GetPageData();
                //定时获取后台数据
                this.timer = setInterval(function () {
                    if (app.counter % 5 == 0)
                        app.GetPageData();
                    else {
                        app.DrawAll();
                    }
                    app.counter++;
                }, 1000);
            },
            mustache: function () {
                console.log("mustache");
            },
            watch: {
                ////watch图形数组，当数组发生变化时重新绘图
                //patterningList: function (val) {
                //    console.log("patterningList");
                //    this.DrawAll();
                //},
                //mapHeight: function (val) {
                //    this.DrawAll();
                //},
            },
            //计算属性
            computed: {
                jsonString: {
                    get: function () {
                        return JSON.stringify(this.patterningList);
                    },
                    set: function (newValue) {
                        this.patterningList = JSON.parse(newValue);
                        this.DrawAll();
                        return JSON.parse(newValue);
                    }
                }
            },
            beforeDestroy: function () {
                //销毁定时器
                clearInterval(this.timer);
            }
        })
    </script>
</body>

</html>
